<template>
	<div>
		<el-row>
			<div style="margin: 20px 20px;display: flex;align-items: center;">
				<label>分类：</label>
			    <el-radio-group v-model="type" size="mini" @change="ShaiXuan">
			        <el-radio-button label="全部"></el-radio-button>
			        <el-radio-button label="用户"></el-radio-button>
			        <el-radio-button label="管理员"></el-radio-button>
			        <el-radio-button label="已冻结"></el-radio-button>
			    </el-radio-group>
			</div>
		</el-row>
		<el-table
		  :data="showList.slice((this.page - 1) * this.num,this.page * this.num)"
		  style="width: 100%"
		  row-key="id"
		  border
		  lazy
		  :default-expand-all="true"
		>
		  <el-table-column label="序号" type="index" width="50" align="center"/>
		  <el-table-column label="头像" width="100" align="center">
			  <template #default="scope">
			<el-avatar :src="scope.row.img?`${$ServerUrl}/api/public/showImg/${scope.row.img}`:''"></el-avatar>
			  </template>
		  </el-table-column>
		  <el-table-column label="用户ID" prop="id"  width="70" align="center"/>
		  <el-table-column label="名称" prop="nickname"/>
		  <el-table-column label="登录账号" prop="account"/>
		  <el-table-column label="手机号码" prop="phone"/>
		  <el-table-column label="身份" width="100" align="center">
			  <template #default="scope">
				  {{scope.row.role=="G"?"管理员":scope.row.role=="P"?"用户":"未知"}}
			  </template>
		  </el-table-column>
		  <el-table-column label="状态" width="100" align="center">
			  <template #default="scope">
				  <label :style="{'color':scope.row.closed==0?'green':'red'}">
					  {{scope.row.closed==0?"正常":scope.row.closed==1?"冻结":"未知"}}
				  </label>
			  </template>
		  </el-table-column>
		  <el-table-column label="操作" align="center">
		  	<template #default="scope">
				<template v-if="scope.row.closed==1">
					<el-button size="small" type="success" @click="resetPwd(1,scope.row)">解冻账户</el-button>
				</template>
				<template v-else>
					<el-button size="small" type="warning" @click="close(scope.row)">冻结账户</el-button>
				</template>
				<el-button size="small" type="primary" @click="resetPwd(2,scope.row)">重置密码</el-button>
		  	</template>
		  </el-table-column>
		</el-table>
		<el-row justify="center">
			<el-pagination background layout="prev, pager, next" style="margin-top: 10px;"
			  :total="total"
			  :page-size="num"
			  hide-on-single-page
			  v-model:currentPage="page">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
import { ElMessage , ElMessageBox } from 'element-plus';
import {mapState} from 'vuex';
export default{
	name:'User',
	data(){
		return {
			type:'全部',
			total:0,
			num:10,//每页数量
			page:1,//当前页码
			userInfoList:[],
			showList:[],//筛选后的数据
		}
	},
	computed:{
		...mapState(['userInfo'])
	},
	methods:{
		//获取用户列表
		getUserList(){
			this.axios.get('/api/adm/user/findAll?start=0&num=9999').then((res)=>{
				if(res.status==200){
					this.userInfoList = res.data.data.users;
					this.total = res.data.data.total;
					this.ShaiXuan(this.type);
				}else{
					this.PushMsg('error',"获取类型数据失败！")
				}
			}).catch((err)=>{
				//console.log(err);
				this.PushMsg('error',"获取类型数据失败！")
			});
		},
		//解冻账户
		resetPwd(type,obj){
			let access = false;
			ElMessageBox.confirm(
				type==1?'是否解冻该账户【'+obj.nickname+'】？':'是否将账户【'+obj.nickname+'】密码强制修改为111111',
				'操作授权',
				{
				  confirmButtonText: '确认',
				  cancelButtonText: '取消',
				  type: 'warning',
				}
			  )
			.then(() => {
				this.axios.get('/api/adm/user/resetPwd/'+obj.id,this.headers).then((res)=>{
					if(res.status==200){
						this.PushMsg('success',(type==1?"解冻成功！":"密码重置成功！")+"，已强制将密码修改为6个1")
						this.getUserList();
					}else{
						this.PushMsg('error',"接口调用异常！")
					}
				}).catch((err)=>{
					//console.log(err);
					this.PushMsg('error',"接口调用异常！！")
				});
			})
		},
		//冻结账户
		close(obj){
			if(obj.id===this.userInfo.id){
				ElMessageBox.alert('无法禁用当前登录账户！', '警告', {
					confirmButtonText: '确定',
				  })
				  return false;
			}
			ElMessageBox.confirm(
				'是否冻结该账户【'+obj.nickname+'】？',
				'操作授权',
				{
				  confirmButtonText: '确认',
				  cancelButtonText: '取消',
				  type: 'warning',
				}
			  )
			.then(() => {
				this.axios.get('/api/adm/user/close/'+obj.id).then((res)=>{
					if(res.status==200){
						this.PushMsg('success',"已冻结账户【"+obj.nickname+"】");
						this.getUserList();
					}else{
						this.PushMsg('error',"接口调用异常！")
					}
				}).catch((err)=>{
					//console.log(err);
					this.PushMsg('error',"接口调用异常！！")
				});
			})
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		},
		ShaiXuan(val){
			this.showList = [];
			if(val=='用户'){
				for(let item of this.userInfoList){
					if(item.role=='P')this.showList.push(item);
				}
			}else if(val=='管理员'){
				for(let item of this.userInfoList){
					if(item.role=='G')this.showList.push(item);
				}
			}else if(val=='已冻结'){
				for(let item of this.userInfoList){
					if(item.closed==1)this.showList.push(item);
				}
			}else{
				this.showList = this.userInfoList;
			}
			this.page = 1;
			this.total = this.showList.length;
		}
	},
	created() {
		this.getUserList();
	},
	watch:{
		page(){
			//this.getUserList();
		}
	}
}
</script>

<style>
</style>
